<template>
  <article class="page">
    <headerbar>
      {{title}}
    </headerbar>
    <section class="frame-content bg-light-gray" :key="refreshKey" ref="frameContent">
      <ul class="tab bottom-my">
        <li v-for="(item,index) in menuList" :key="index" @click="clickMenu(item,index)" :class="{'active':currentIndex == index}">
          <span>{{item.channelName}}</span></li>
      </ul>
      <cube-slide
        ref="slide"
        :loop="loop"
        :initial-index="0"
        :auto-play="autoPlay"
        :show-dots="showDots"
        :options="slideOptions"
        @change="changePage"
        v-if="menuList.length && menuList.length > 0"
      >
        <fetchData  class="detail" :loading="isLoading" :data="menuList"></fetchData>
        <cube-slide-item v-for="(item,index) in menuList" :key="index">
          <themeActivityListComponent :chanelId="item.id" :channelName="item.channelName" :currentIndex="index"></themeActivityListComponent>
        </cube-slide-item>

      </cube-slide>

    </section>
  </article>
</template>

<script>
  import themeActivityListComponent from './themeActivityListComponent'
  import StorageKeys from '@/common/const/StorageKeys'
  import _ from 'lodash'
  let fetchClassTryTime = 0
  export default {
    components: {themeActivityListComponent},
    name: 'themeActivity',
    data () {
      return {
        groupInfoClickData: 0,
        currentIndex: 0,
        pageIndex: 1,
        pageSize: 10,
        menuId: '',
        refreshKey: '',
        isLoading: true,
        menuList: [],
        list: [],
        topList: [],
        recommend: [],
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        all: {
          list: [],
          topList: [],
          recommend: []
        },
        excludeIds: [],
        loop: false,
        autoPlay: false,
        showDots: false,
        slideOptions: {
          listenScroll: true,
          probeType: 3,
          directionLockThreshold: 0
        },
        scrollOptions: {
          directionLockThreshold: 0
        },
        title:'建党100周年',
      }
    },
    beforeRouteLeave(to, from, next) {
      next()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.name === 'themeActivity') {
          to.meta.keepAlive = true
          vm.$store.commit('addRoute', 'themeActivity')
        }
      })
    },
    created () {
      this.currentIndex = this.$route.query.index || 0
      this.fetchClass()
//      this.groupInfoClick()
    },
    activated () {
      this.getDictValue()//请求主题活动字典值
      if (this.$store.state.hasFullScreen) {
        this.refreshKey = Date.now()
        this.$store.state.hasFullScreen = false
        this.switchTab(this.$route.query.index)
      }
      this.$nextTick(() => {
        /*在评论后猜测slide组件被重置*/
        this.$refs.slide.slide.refresh()
      })
    },
    mounted () {
      console.log(this.$route.name, 'mounted')
      let index = this.$route.query.index || 0
      this.$nextTick(() => {
        if (this.$refs.slide && this.$refs.slide.slide) {
          this.$refs.slide.slide.goToPage(index, 0, 300)
        } else {
        }
      })
    },
    methods: {
      /*跳转到对应tab*/
      switchTab (index) {
        this.$nextTick(() => {
          if (this.$route.query.index != index) {
            this.$router.replace({path: this.$route.name, query: {index: index}})
          }
          setTimeout(() => {
            this.$refs.slide.slide && this.$refs.slide.slide.goToPage(index, 0, 300)
          }, 0)
        })
      },
      /*左右滑动事件*/
      changePage (current) {
        this.currentIndex = current
        console.log(current)
        this.clickMenu(this.menuList[current], current)
      },
      onRouteChange () {
//        this.init()
      },
      init () {
        this.pageIndex = 1
        this.menuList = []
        this.list = []
        this.topList = []
        this.recommend = []
        this.all.list = []
        this.all.topList = []
        this.all.recommend = []
      },
      goDetail (item) {
        this.$store.state.tempListData = this
        this.$store.state.newsDetail = item
        this.$router.push({name: 'redCloudNewsDetail', params: {id: item.id}})
      },
      goGroupInfo () {
        this.groupInfoClickAdd()
        this.$router.push({name: 'groupInfoList'})
      },
      groupInfoClickAdd () {
        let data = {
          clickType: '0'
        }
        this.fetchService.groupInfoClickAdd(data).then(res => {
          if (res.code !== 0) {
            this.tools.tip(res.message)
          }
        })
      },
      clickMenu (item, index) {
        this.currentIndex = index
        // 不让记录影响返回历史
        if (this.$route.query.index != index) {
          this.$router.replace({name: this.$route.name, query: {index: index}})
        }
        this.menuId = item.id
        this.pageIndex = 1
        this.list = []
        this.topList = []
        // 记录栏目类型
        // localStorage.setItem(StorageKeys.LOG_THEME_TYPE, this.menuList[index].channelName.replace('[评]',''))
        // localStorage.setItem(StorageKeys.LOG_CONTENT_TYPE, 1)  // 1 文字、2 音频、3 视频
//        this.fetchList(item.id)
      },
      fetchList (id) {
        this.excludeIds = []
        this.topList.map((v) => {
          this.excludeIds.push(v.id)
        })
        this.recommend.map((v) => {
          this.excludeIds.push(v.id)
        })
        this.isLoading = true
        id = id || this.menuId
        let data = {
          "channelId": id || "",
          "pageNo": this.pageIndex,
          "pageSize": this.pageSize,
          "summary": "",
          "title": "",
          excludeIds: this.excludeIds
        }
        return this.fetchService.contentPage(data).then(res => {
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg)
          }
          this.isLoading = false
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          if (this.pageIndex === 1) {
            this.list = []
            this.topList = []
            this.recommend = []
          }
          this.list = this.list.concat(res.data.page)
          let top = res.data.top || []
          this.topList = this.topList.concat(top)
          let recommendList = res.data.recommend || []
          this.recommend = this.recommend.concat(recommendList)
          this.pageIndex ++
          // if (res.data.page.length === 0 && top.length === 0) {
          //   this.tools.tip('暂无更多')
          // }
          return res
        })
      },
      groupInfoClick () {
        this.fetchService.groupInfoClick('0').then(res => {
          if (res.code === 0) {
            this.groupInfoClickData = res.data.number
          }
        })
      },
      async getDictValue () {
        let data={
          catKey:'HYTT',
          treeKey:'ZTHD'
        }
        await this.fetchService.dictValue(data).then(res => {
          console.log('this.fetchService.dictValue',res.data)
          if(res.code === 0){
            console.log('res.data[0].value',res.data[0].value);
            this.title=res.data[0].name
          }
        })
      },
      fetchClass () {
        this.isLoading = false
        // 如果有缓存就不去请求接口
        let menuList = this.cache.getVal(this.cache.keys.THEMEACTIVITY_CHANNEL)
        if (menuList != false) {
          this.menuList = menuList
          this.clickMenu(this.menuList[this.currentIndex], this.currentIndex)
          return false
        }
        let data = {
          "id": "f6f5853ffb7d41f0a2bafe9c3895a333",
          "publicWay": "0"
        }
        this.fetchService.currentChannel(data).then(res => {
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg)
          }
          if (res.data.length === 0 && fetchClassTryTime <= 3) {
            fetchClassTryTime++
            return setTimeout(() => {
              this.fetchClass()
            }, 1000)
          }
          this.isLoading = false
          this.menuList = res.data
          this.cache.setVal(this.cache.keys.THEMEACTIVITY_CHANNEL, this.menuList)
          this.clickMenu(this.menuList[this.currentIndex], this.currentIndex)
        })
      },
      hasList () {
        return this.list.length > 0 || this.topList.length > 0
      },
      onPullingUp () {
        this.fetchList().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        })
      }
    },
    watch: {
      currentIndex (newVal) {
        this.$nextTick(() => {
          this.$refs.slide && this.$refs.slide.slide && this.$refs.slide.slide.goToPage(newVal, 0, 300)
        })
      },
      $route (to, from) {
//        this.groupInfoClick()
        if (to.name !== from.name) {
          return false
        }
        if (to.name != 'redCloudNewsDetail') {
          this.$store.state.redCloudHeadlineNeedRefresh = true
        }
        this.onRouteChange(this)
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .head-bd {
    transform:translateX(pxToRem(-35px));
  }
.bottom-my{
  margin-bottom: 0px;
}
  .home-banner-wrap {
    background: rgba(255, 255, 255, 0.9);
    height: pxToRem(350px);
    width: 100%;
    .home-banner {
      position: relative;
      @include fullImg();

      .text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: #fff;
        padding: 5px 8px;
        overflow: hidden;
      }
      img {
        @include fullImg();
      }
    }
  }
  .home-icon-btns {
    background: rgba(255, 255, 255, 0.9);
    padding: pxToRem(54px) 0 pxToRem(40px);
    .icon-btns {
      .item {
        .img {
          margin-bottom: pxToRem(14px);
        }
      }
    }
  }
  .scroll-imgs {
    background: rgba(255, 255, 255, 0.9);
    padding: pxToRem(20px);
    padding-top: 0;
    overflow-y: auto;
    ul {
      display: flex;
    }
    li {
      width: pxToRem(496px);
      height: pxToRem(198px);
      flex-shrink: 0;
      border: 1px solid rgba(255, 183, 183, 1);
      box-shadow: 0px 4px 6px 0px rgba(54, 0, 0, 0.23);
      margin-right: pxToRem(20px);
      &:last-child {
        /*margin-right:0;*/
      }
      img {
        @include fullImg();
      }
    }
  }
  .platform {
    background: rgba(255, 255, 255, 0.9);
    margin: pxToRem(30px) 0;
    padding: pxToRem(30px) pxToRem(37px);
    h2 {
      font-size: pxToRem(26px);
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin-bottom: pxToRem(30px);
      .more-text {
        color: $theme-color;
        font-size: pxToRem(20px);
        float: right;
      }
    }
    .list-squareness {
      display: flex;
      justify-content: space-between;
      li {
        width: pxToRem(210px);
        height: pxToRem(210px);
        background: rgba(255, 250, 241, 1);
        box-shadow: 0px 4px 6px 0px rgba(54, 0, 0, 0.1);
        border-radius: pxToRem(6px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        img {
          width: pxToRem(98px);
          height: pxToRem(98px);
          border-radius: 100%;
          margin-bottom: pxToRem(12px);
        }
      }
    }
  }

  /*组工信息*/
  .top-banner {
    height:195px;
    position: relative;
    /*border:1px solid rgba(192, 192, 192, 0.55);*/
    img {
      @include fullImg();
    }
    .read-number {
      position:absolute;
      right:80px;
      bottom:10px;
      color:#666;
      font-size: 14PX;
    }
  }
  .bg-light-gray{
    overflow-y: hidden;
  }
</style>

